import { defineStore } from 'pinia';
import { useStorage } from '@vueuse/core';

export const useCompanyLayoutStore = defineStore('companyLayout', () => {
  const layoutState = reactive({
    /** 左侧菜单栏宽度 */
    siderWidth: 224,
    /** 左侧菜单栏折叠宽度 */
    siderCollapsedWidth: 58,
    /** 左侧菜单栏折叠状态 */
    siderCollapsed: false,
  });

  /** 切换左侧菜单栏折叠状态 */
  const toggleSiderCollapsed = () => (layoutState.siderCollapsed = !layoutState.siderCollapsed);

  /** 响应式宽度，跟随折叠状态 */
  const responsiveWidth = computed(() =>
    layoutState.siderCollapsed ? layoutState.siderCollapsedWidth : layoutState.siderWidth,
  );

  /** 持久化左侧菜单栏折叠状态 */
  useStorage('companyLayoutSiderCollapsed', toRef(layoutState, 'siderCollapsed'));

  return {
    ...toRefs(layoutState),
    toggleSiderCollapsed,
    responsiveWidth,
  };
});
